<template>
  <section class="cityList" ref="cityList">
    <div>
      <div class="area">
        <p class="title border-topbottom">当前城市</p>
        <div class="butList">
          <div class="butWrap">
              <p class="button">北京</p>
          </div>
        </div>
      </div>
      <div class="area">
        <p class="title border-topbottom">热门城市</p>
        <div class="butList">
          <div class="butWrap" v-for="item in hotCity" :key="item.id">
              <p class="button">{{item.name}}</p>
          </div>
        </div>
      </div>
      <div class="area" v-for="(item,key) in city" :key="key" :ref="key">
        <p class="title border-topbottom">{{key}}</p>
        <div class="itemList border-bottom" v-for="innerItem in item" :key="innerItem.id">
          <p class="item">{{innerItem.name}}</p>
        </div>
      </div>
     </div>
  </section>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'cityList',
  props: {
    city: Object,
    hotCity: Array,
    letter: String
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.cityList)
  },
  watch: {
    letter () {
      // console.log(this.letter)
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/varibles.styl'

.border-topbottom
  &:before
    border-color:#ccc
  &:after
    border-color:#ccc
.cityList
    overflow:hidden
    position: absolute
    top: 1.78rem
    left: 0
    right: 0
    bottom: 0
  .title
    line-height:.44rem
    background:#eee
    padding-left:0.2rem
    color:#666
    font-size:.26rem
  .butList
     padding:0.1rem 0.6rem 0.1rem 0.1rem
     overflow:hidden
    .butWrap
      float:left
      width:33.33%
      .button
        margin:0.1rem
        padding:0.1rem
        text-align:center
        border:.02rem solid #ccc
  .itemList
    .item
      line-height:.6rem
      padding-left:.2rem
    .border-bottom
      &:after
        border-color:#ccc
</style>
